<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动</title>
		<style>
			#main>div {
				height: 100px;
				width: 100px;
				margin: 10px;
				border: 1px solid red;
				float: right;
			}
			#main{
				border: 2px groove black;
				/* height: 230px; */
				float: right;
				
			}
			#cleardiv{
				height: 0;
				clear: both;
			}
		</style>
	</head>
	<body>
		<!-- 采用外部套一个大元素 -->
		<div id="main">
			<div id="d1">1</div>
			<div id="d2">2</div>
			<div id="d3">3</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">6</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
			<div id="d4">4</div>
			<div id="d5">5</div>
			<div id="d4">4</div>
		</div>
		<div id="cleardiv"></div>	 
			<h1 style="border: 1px solid green;margin:4px">
				we love java9
			</h1>
	</body>
</html>
